התגית marquee כבר מזמן לא עומדת בתקן ה-html.
הנה תחליף שמעתיק את כל ה-marquee ומוסיף לו עוד טיפה. והכל בצורה תקינה - עם jQuery. :)
שלום לכולם,
החלטתי להכין marquee עם jQuery. כמובן שצריך את הספריה של jQuery כדי שזה יעבוד... :)
דמו:
http://web-school.co.il/demos/marquee/v1.0
קובץ JS:
http://web-school.co.il/demos/marquee/v1.0/marquee.js
*שימו לב - יצאה גירסה 2.0: כאן*
איך משתמשים?
קודם כל ניצור instance חדש של הפונקציה marquee (אפשר להעביר כפרמטר אובייקט שקובע את המאפיינים של ה-marquee, האובייקט הוא כמו האובייקט שבמתודה setProperties שמופיעה בהמשך):
var m = new marquee();
כדי לשנות את המאפיינים של ה-marquee נפעיל את המתודה setProperties. היא מקבלת 2 פרמטרים:
1. אובייקט. מכיל את ההגדרות עצמן.
2. true/false (אופציונאלי). במידה ונעביר true, הפונקציה תשחזר את כל המאפיינים של ה-marquee לברירת המחדל, ואז תכניס את המאפיינים שנתנו לה בפרמטר הראשון (שימושי כאשר מעבירים רק מאפיין אחד בפרמטר הראשון ורוצים שכל שאר המאפיינים יאופסו לברירת המחדל, או כשמעבירים אובייקט ריק כפרמטר ראשון ו-true כפרמטר שני כדי לאפס את מאפייני ה-marquee).
m.setProperties({
direction : 'up',
delay : 100,
scrollAmount : 10,
behavior : 'alternate',
loops : 3
});
direction : 'up',
delay : 100,
scrollAmount : 10,
behavior : 'alternate',
loops : 3
});
המאפיינים:
direction - כיוון התנועה. מקבל right, left, up או down.
delay - הפסקה בין כל תזוזה. מקבל מספר חיובי, לפחות 85.
scrollAmount - מספר פיקסלים לזוז בכל תזוזה. מקבל ערך מספרי.
behavior - התנהגות ה-marquee וסגנון התנועה. מקבל scroll, slide או alternate.
loops - כמות סיבובים לביצוע. מקבל ערך מספרי. 0 נחשב כאין-סוף סיבובים. אינו אפקטיבי אם behavior נקבע ל-slide.
כדי להכניס אלמנטים לפונקציה נשתמש ב-create. הפונקציה מקבלת כפרמטר אובייקט שכל key שלו נותן "שם" שבאמצעותו נוכל לגשת לאלמנט וכל-value הוא בעצם האלמנט עצמו (אפשר להכניס מספר אלמנטים לתוך key באמצעות מערך):
m.create({
div1 : $("#myMarqueeDiv"),
div2 : $("#myOtherMarqueeDiv")
});
div1 : $("#myMarqueeDiv"),
div2 : $("#myOtherMarqueeDiv")
});
כאן יצרנו 2 אלמנטים; אחד עם השם "div1" והשני עם השם "div2".
כמובן שאפשר להוסיף עוד מפתחות לאובייקט וכמו שאמרתי אפשר להכניס כמה אלמנטים לכל מפתח באמצעות מערך.
המאפיינים שקבענו ל-marquee (עם הפרמטר שהכנסנו לה או עם המתודה setProperties) הופכים להיות המאפיינים של האלמנטים שהכנסנו.
אם נרצה לשנות לאחד האלמנטים את המאפיינים שלו, נפעיל עליו את המתודה setProperties (זהה ל-setProperties הקודמת, רק שהיא לא משנה את מאפייני האלמנט לברירת המחדל של ה-marquee, אלא למאפיינים הנוכחיים של ה-marquee).
m.div1.setProperties({
direction : 'right'
}):
direction : 'right'
}):
כאן שינינו את המאפיין direction לאלמנט div1 (שיצרנו מקודם באמצעות create).
כדי להפעיל את ה-marquee על אלמנט מסוים, נפעיל את המתודה start:
m.div1.start();
כדי לעצור נפעיל את stop(). (אם נפעיל אחרי stop את start שוב, אז start ימשיך בדיוק מהנקודה שבו הוא הפסיק.)
כדי להפעיל מחדש את ה-marquee, נשתמש ב-restart().
כדי להחזיר את האלמנט למקומו לפני ה-marquee, נשמתשמ ב-reset().
אם נרצה להפעיל את כל האלמנטים שיצרנו, אפשר להשתמש ב-startAll():
m.startAll();
בדומה ל-startAll() יש גם את stopAll(), את restartAll() ואת resetAll().
אשמח לביקורת ולהצעות לשיפור. :)
תגובות לכתבה:
קצת מוזר של marquee קונקרטי תהיה אפשרות לעשות
startAll גם ל maquees אחרים
מה זאת אומרת לבצע startAll לאחרים?
ה-startAll מתבצע רק על האלמנטים שקיימים ב-instance שלו.
אם אני אצור 2 instancים ואפעיל באחד מהם את startAll, בשני לא יהיה שינוי.
הבנתי, במקרה הזה הכל בסדר.
בהנחה ש instance אחד הוא על דיב אחד בלבד.
ב-instance אתה יכול להכניס כמה אלמנטים שאתה רוצה עם המתודה create.
אחר כך אם תריץ את startAll באותו ה-instance, הוא יעבוד על כל האלמנטים שהכנסת עם המתודה create באותו ה-instance, לא ב-instanceים אחרים.
הבנתי. נראה מעולה, למרות שנראה מוזר לשים כמה את אותו אינסטנס על כמה אלמנטים.
זה יכול להיות מוזר, אבל תתיחס לזה כאל קופסה, ואפשרות למיון של האלמנטים שלך.
יכול להיות שיש לי כמה marquees באתר.
2 marquees של חדשות,
3 marquees של תגובות,
ו-4 marquees של אשכולות לדוגמה.
אז אני יכול ליצור instance אחד לחדשות וליצור בו 2 אלמנטים עם הפונקציה create, ליצור עוד instance אחד לתגובות וליצור בו 3 אלמנטים של עם create וליצור עוד instance לחדשות וליצור בו 4 אלמנטים עם create.
ככה אתה יכול לחלק את ה-marquees שלך לקבוצות ולשלוט על קבוצה בנפרד. (:
ראיתי בקוד משהו קצת לא מובן .
אחרי הCONSTRUCT עשית (marqueeProperties), מה זה אומר ?
זה פונקציה שקוראת לעצמה.
marqueeProperties זה הפרמטר שקיבלנו בפונקציה marquee, אני פשוט העברתי אותה ל-construct.
זה מוסבר יפה כאן: http://phpguide.co.il/javascript_scopes_objects_functions.htm
(תחת הכותרת פונקציות).
תודה תודה גבר.
וראיתי עוד משהו שאתה מכניס אלמנטי JQ בפרמטר והKEY האסוציאטיבי שלהם הופך למשתנה של הINSTANCE בפני עצמו, אתה עושה את זה בתוך הלולאת FOR בCREATE נכון?? שאתה מוסיף למערך של THIS את הKEY ואז לפי מה שהבנתי זה כבר הופך את זה בעצמו למשתנה מחלקה (נגיד this['idan'] אני אוכל לקרוא this.idan) אני טועה?.
לא ראיתי גם שהוא הראה דוגמא שהוא העביר פרמטר כמו שאמרת אחרי הסוגריים וגם שמתי לב שעשית את הקונסטרקטור אנונימיX::
פונקציה אנונימית היא פונקציה שאי אפשר לקרוא לה, ככה שזו לא ממש פונקציה אנונימית כי אתה יכול לקרוא לה, אם תעשה m.construct().
זה בגלל שברגע שהכנסתי את הפונקציה לתוך המשתנה construct, היא קיבלה את השם construct, והיא כבר לא אנונימית. :)
זה נכון שהוא לא הראה שהוא העביר פרמטר, אבל הוא הראה מה זו פונקציה שקוראת לעצמה.
אני פשוט הוספתי פרמטר.
אתה יכול לראות את זה כאן:
http://phpguide.co.il/forum/index.php/topic,559.0.html
וכן, זה נכון מה שאמרת בתגובה השנייה שלך (התגובה עם ה-this.idan).
זה קורה בגלל שב-js אין מערך אסוציאטיבי, במקומו יש את האובייקט.
ככה שלכתוב x.abc = 5
שווה ללכתוב: x['abc'] = 5
:)
קומנט בדיקה
שדגכ
גם אני רציתי לשאול או להעיר משהו: למה לעשות את CONSTRUCT כ"כביכול אנונימית" אך לא אנונימית, במה זה עוזר ? כדי שתוכל אחרי זה לקרוא לה ישר ?
היא לא "כביכול אנונימית", היא לא אנונימית.
הרגע שהכנסתי אותה למשתנה היא לא אנונימית.
אם השאלה שלך היא למה עשיתי את זה כפונקציה, ולא סתם קוד, אז הסיבה היא שרציתי למיין בין הדברים,
וככה אני יודע אם זה construct.
אבל אתה ישר אח"כ קורא לה ושומר את התוצאה בתוך this.construct .
נכון.
כי construct זו פונקציה שפועלת ברגע שוקוראים לאובייקט.
ככה שברגע שאתה תעשה:
x = new marquee אז construct יופעל אוטומטית.
אם הכוונה שלך היא למה הכנסתי את זה למשתנה, זה כי אני רציתי למיין בין הדברים, ושלא יהיו קודים מפוזרים באוויר.
dfgdfgdfg
תודה עזרתה לי..
שמחתי לעזור. (: